<template>
	<view class="container">
		<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
		<view class="view-check">
			<view class="check">
				<view class="check-item" :class="{'active':active}" @click="handleClickCheck(true)">工程询价</view>
				<view class="check-item" :class="{'active':!active}" @click="handleClickCheck(false)">采购询价</view>
			</view>
		</view>
		<view class="">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="项目名称" prop="projectName">
					<u-input :border="border" placeholder="请输入" v-model="model.projectName" type="text" input-align="right"></u-input>
				</u-form-item>
				<block v-if="type == 1">
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="项目类型" prop="projectType">
					
					<view style="width:100%;text-align: right;" @click="mSelect">{{model.projectType || "请选择"}}</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="项目阶段" prop="projectStage">
					 <view style="width:100%;text-align: right;" @click="gcjdSelect">{{model.projectStage || "请选择"}}</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="项目规模" prop="projectScale">
					<u-input :border="border" placeholder="请输入面积     平方米" v-model="model.projectScale" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="投资额" prop="investment">
					<u-input :border="border" placeholder="请输入金额       万元" v-model="model.investment" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="项目地域" prop="projectRegion" label-width="200">
					<view style="width:100%;text-align: right;" @click="cityActive = true">{{model.projectRegion || "请选择"}}</view>
					<!-- <u-input type="select" :select-open="selectShowDy" v-model="model.projectRegion" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowDy = true"></u-input> -->
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition" label="工作周期" prop="projectCycle">
			
					<u-input
						type="input"
						v-model="resultDate"
						placeholder="请选择日期"
						input-align="right"
						 @click="show = true"
					></u-input>
					<u-calendar v-model="show" ref="calendar" @change="change" mode="range" max-date="2030-10-01">
					</u-calendar>
				</u-form-item>
			
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="项目报价" prop="projectQuoted">
					<u-input :border="border" placeholder="请输入金额  万元" v-model="model.projectQuoted" type="text" input-align="right"></u-input>
				</u-form-item>
				</block>
				<block v-else>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="产品类型" prop="productType">
						<u-input :border="border" placeholder="请输入" v-model="model.productType" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="产品数量" prop="productNum">
						<u-input :border="border" placeholder="请输入" v-model="model.productNum" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="产品规格" prop="productSpec">
						<u-input :border="border" placeholder="请输入" v-model="model.productSpec" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="单价" prop="projectQuoted">
						<u-input :border="border" placeholder="请输入金额  万元" v-model="model.projectQuoted" type="text" input-align="right"></u-input>
					</u-form-item>
				</block>
				<u-form-item class="u-m-l-30 u-m-r-30"  label-width="200" :label-position="labelPosition" label="保证金" prop="bond">
					<u-input :border="border" placeholder="请输入金额  万元" v-model="model.bond" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30"  label-width="200" :label-position="labelPosition" label="询价时效" prop="xjprescripte">
					<u-input :border="border" placeholder="请输入天数  天" v-model="model.xjprescripte" type="text" input-align="right"></u-input>
				</u-form-item>
				<view class="sctp u-flex u-m-l-40 u-m-r-30 u-m-t-40 ">
				
					<text class="hz">规则说明</text>
				</view>
				<u-form-item class="  zwpj u-m-l-30 u-m-r-30 " :label-position="labelPosition"  prop="remark">
					<u-input  type="textarea" :border="border" placeholder="请详细说明询价规则" v-model="model.remark" />
				</u-form-item>
			</u-form>
		</view>
		<view class="u-m-t-20 u-p-30">
			<u-button class="button" @click="submit">提交</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="fetchDict.progress_stage" v-model="selectShowFwnr" @confirm="selectConfirmFwnr"></u-select>
			<u-select mode="single-column" :list="fetchDict.adept_field_stage" v-model="selectShowprojectStage" @confirm="selectConfirmprojectStage"></u-select>
			
			<u-select :default-value="defaultValue" v-model="selectShowDy" mode="mutil-column-auto" value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>
			
			
			<u-select mode="single-column" :list="selectList" v-model="selectShowScly" @confirm="selectConfirmScly"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowprojectCycle" @confirm="selectConfirmprojectCycle"></u-select>
			<u-picker mode="projectRegion" v-model="pickerShow" @confirm="projectRegionConfirm"></u-picker>
			<TriTree ref="gcjdTree"  :range="fetchDict.progress_stage" @confirm="function (e){return setChooseType(e,'projectStage')}"></TriTree>
			<TriTree ref="triTree" :range="fetchDict.financing_cooperation_project_category" @confirm="function (e){return setChooseType(e,'projectType')}"></TriTree>
		<city-select v-model="cityActive" @city-change="cityChange"></city-select>
			<!--弹出框-->
		</view>
	</view>
</template>

<script>
import citySelect from '@/components/u-city-select.vue';
export default {
	components:{
		citySelect
	},
		data(){
			return{
				cityActive: false,
				selectShowDy:false,
				selectShowFwnr:false,
				fetchDict:[],
				resultDate:'',
			startDate: "",	
			startText: '开始',
			endText: '结束',
				show:false,
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 20,
				marginBottom: 20,
				active: true,
				/**
				 * form验证
				 * */
				model: {
					projectType: '',
					projectName: '',
					projectStage: '',
					projectScale: '',
					investment: '',
					projectRegion: '',
					projectCycle: '',
					projectQuoted: '',
					bond: '',
					xjprescripte: '',
					remark: '',
				},
				reqBody: {},
				selectList: [
					{
						value: '测试1',
						label: '测试1'
					},
					{
						value: '测试2',
						label: '测试2'
					},
					{
						value: '测试3',
						label: '测试3'
					}
				],
				rules: {
					qymc: [
						{
							required: false,
							message: '请输入企业名称',
							trigger: 'blur'
						}
					],
					zltx: [
						{
							required: false,
							message: '请选择质量体系',
							trigger: 'change'
						}
					],
					scly: [
						{
							required: false,
							message: '请选择擅长领域',
							trigger: 'change'
						}
					],
					rybm: [
						{
							required: false,
							message: '请输入人员规模',
							trigger: 'blur'
						}
					],
					name: [
						{
							required: false,
							message: '请输入姓名',
							trigger: 'blur' ,
						},
						{
							min: 3,
							max: 5,
							message: '姓名长度在3到5个字符',
							trigger: ['change','blur'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.chinese(value);
							},
							message: '姓名必须为中文',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						},
						// 异步验证，用途：比如用户注册时输入完账号，后端检查账号是否已存在
						// {
						// 	trigger: ['blur'],
						// 	// 异步验证需要通过调用callback()，并且在里面抛出new Error()
						// 	// 抛出的内容为需要提示的信息，和其他方式的message属性的提示一样
						// 	asyncValidator: (rule, value, callback) => {
						// 		this.$u.post('/ebapi/public_api/index').then(res => {
						// 			// 如果验证出错，需要在callback()抛出new Error('错误提示信息')
						// 			if(res.error) {
						// 				callback(new Error('姓名重复'));
						// 			} else {
						// 				// 如果没有错误，也要执行callback()回调
						// 				callback();
						// 			}
						// 		})
						// 	},
						// }
					],
					sex: [
						{
							required: false,
							message: '请选择性别',
							trigger: 'change'
						},
					],
					intro: [
						{
							required: false,
							message: '请填写简介'
						},
						{
							min: 5,
							message: '简介不能少于5个字',
							trigger: 'change' ,
						},
						// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
						{
							pattern: /^[\u4e00-\u9fa5]+$/gi,
							message: '简介只能为中文',
							trigger: 'change',
						},
					],
					likeFruit: [
						{
							required: false,
							message: '请选择您喜欢的水果',
							trigger: 'change',
							type: 'array',
						}
					],
					payType: [
						{
							required: false,
							message: '请选择任意一种支付方式',
							trigger: 'change',
						}
					],
					projectRegion: [
						{
							required: false,
							message: '请选择地区',
							trigger: 'change',
						}
					],
					goodsType: [
						{
							required: false,
							message: '请选择商品类型',
							trigger: 'change',
						}
					],
					phone: [
						{
							required: false,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					code: [
						{
							required: false,
							message: '请输入验证码',
							trigger: ['change','blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change','blur'],
						}
					],
					password: [
						{
							required: false,
							message: '请输入密码',
							trigger: ['change','blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change','blur'],
						}
					],
					rePassword: [
						{
							required: false,
							message: '请重新输入密码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change','blur'],
						}
					],
				},
				type: 0,
				communeId: 0,
				required: false,
				border: false,
				check: false,
				pickerShow: false,
				selectStatus: 'close',
				selectShowprojectType: false,
				selectShowprojectStage: false,
				selectShowScly: false,
				selectShowprojectCycle: false,
				// selectShowQydy: false,
				// selectShowLyxy: false,
				radio:'',
				radio1: '',
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				checkboxList: [
					{
						name: '是',
						checked: false,
						disabled: false
					},
					{
						name: '否',
						checked: false,
						disabled: false
					},
					
				],
				checkboxList1: [
					{
						name: '是',
						checked: false,
						disabled: false
					},
					{
						name: '否',
						checked: false,
						disabled: false
					},
					
				],
				listCitys: [],
				defaultValue: [3],
			}
		},
		onLoad(options){
			let that = this
			if(options.id){
				that.communeId = options.id
			}
			this.type = 1;	
			var keys = {'keys':['financing_cooperation_project_category','progress_stage','people_type','adept_field_stage']}
			this.dictionaryFetchDict(keys);
			this.cityList();		
		},
		onShow(){			
		},
		methods:{
			cityChange(e) {
				let address = e.province.label
				if(e.city){
					address = address + '-' + e.city.label;
				}
				if(e.area){
					address = address + '-' + e.area.label;
				}
				this.model.projectRegion = address
			},
			mSelect() {
				this.$refs.triTree._show()
			},
			setChooseType(item, type) {
				var column_array = this.$mUtils.array_column(item, 'label');
				var modelValue = column_array.join(',');
				this.model[type] = modelValue;
				this.$forceUpdate()
			},
			async dictionaryFetchDict(keyWords) {
				let result = await this.$apis.fetchMultipleKey(keyWords);
				this.fetchDict = result.data;
			},
			gcjdSelect() {
				this.$refs.gcjdTree._show()
			},	
			async cityList() {
			let result = await this.$apis.fetchArea({level:2});	
				this.listCitys = result.data;
			},	
			confirmCity(e) {
				this.model.projectRegion = '';
				e.map((val, index) => {
					this.model.projectRegion += this.model.projectRegion == '' ? val.label : '-' + val.label;
				})
			},			
			selectConfirmFwnr(e) {
				this.model.projectType = '';
				e.map((val, index) => {
					this.model.projectType += this.model.projectType == '' ? val.label : '-' + val.label;
				});
			},
			change(e) {		
				let startDate = new Date(e.startDate);
				let nowDate = new Date();
				if(nowDate > startDate){
					uni.showToast({
						title:"开始时间不能小于当前时间",
						icon:'none'
					})
					return;
				}
				this.model.projectCycle = e.startDate + '-' + e.endDate;
				this.resultDate = e.startDate +"-"+ e.endDate;
			},
			handleClickCheck(e) {
				if(e){
					this.type = 1
				}else{
					this.type = 2
				}
				
				this.active = e
			},
			async submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.inquiryRelease();
					} else {
						console.log('验证失败');
					}
				});
			},
			//新增发布询价
			async inquiryRelease(){
				try {
				let reqBody = this.model;
				reqBody['communeId'] = this.communeId;
				if(this.model.investment) reqBody['investment'] = parseInt(this.model.investment);
				if(this.model.projectCycle) reqBody['projectCycle'] =parseInt(this.model.projectCycle);
				if(this.model.xjprescripte) reqBody['xjprescripte'] =parseInt(this.model.xjprescripte);
				reqBody['type'] = this.type;
				let data = await this.$apis.inquiryRelease(reqBody);
				if(data.code == 200){								
					uni.showToast({
							title: "提交成功",
							icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack()
					},2000)
					
				}else{
					uni.showToast({
						title: data.message,
						icon: 'none'
					});
					return;
				}
				} catch (e) {
					console.log(e);
					this.submitBtnDis = false;
				}
			},
			// 选择地区回调
			projectRegionConfirm(e) {
				this.model.projectRegion = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			selectConfirmprojectType(e) {
				this.model.projectType = '';
				e.map((val, index) => {
					this.model.projectType += this.model.projectType == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmprojectStage(e) {
				this.model.projectStage = '';
				e.map((val, index) => {
					this.model.projectStage += this.model.projectStage == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmprojectCycle(e) {
				this.model.projectCycle = '';
				e.map((val, index) => {
					this.model.projectCycle += this.model.projectCycle == '' ? val.label : '-' + val.label;
				});
			},
		},
		
	}
</script>

<style scoped lang="scss">
	.view-check {
		background-color: #fff;
		height: 110rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// border-bottom: #f4f4f4 solid 1rpx;
	
		.check {
			width: 460rpx;
			height: 64rpx;
			display: flex;
			background-color: #F0F0F0;
			border-radius: 32rpx;
	
			.check-item {
				width: 230rpx;
				text-align: center;
				line-height: 64rpx;
				border-radius: 32rpx;
				color: #0E1E36;
			}
	
			.active {
				color: #fff;
				background-color: #AB62FF;
			}
		}
	}
	.zwpj{
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
	.hz{
		color: #0D1D36;
		font-size: 30rpx;
		margin-left: 15rpx;
	}
	.button {
		width: 662rpx;
		margin:132rpx auto 78rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;
		&.u-hairline-border:after {
			border: 0;
		}
	}
</style>
